<template>
  <div class="search">
    <div class="location" @click="choiceCity">
      <span>{{cityName.region_name_c}}</span><span class="iconfont icon-xia"></span>
    </div>
    <div class="search_content" @click="goIndexSearch">
      <div>资讯百科 <span class="iconfont icon-xiala"></span></div>
      <div>
        请输入关键词
      </div>
      <div>
        <span class="iconfont icon-sousuo"></span>
      </div>
    </div>
    <div class="map" @click="cityMap">
      <span class="iconfont icon-ditu"></span>
      地图
    </div>
    <div id="container"></div>
  </div>
</template>

<script>
  import {getCityName, setCityName,getLatitude} from '../../assets/js/cache';
  import alert from '../../store/modules/alert';

  export default {
    name: 'Search',
    data() {
      return {
        center: {lng: 0, lat: 0},
        cityName: {code: '4601', region_name_c: '海口市', region_name_e: 'H'},
        ruleForm: {}
      }
    },
    created() {
      this.getFFFF();
      this.getPositionData();
    },
    watch: {
      '$route'(to, from) {
        if (to.name === 'Index') {
          this.getFFFF();
        }
      }
    },
    methods: {
      //获取本地存储地理位置
      getPositionData(){
        if (getLatitude() === undefined) {

        }else {

        }

      },
      // 城市选择
      choiceCity() {
        let that = this;
        that.$router.push({name: 'CityIndex'});
      },
      // 地图找房
      cityMap() {
        // this.$router.push({name: 'HouseMap', query: {lng: 1, log: 2}})
        this.$router.push({name: 'HouseMap'})
      },
      // 自动获取经纬度
      getFFFF() {
        if (getCityName() === undefined) {
          this.cityName = {CODE: '4601', region_name_c: '海口市', region_name_e: 'H'};
          setCityName(this.cityName);

        } else {
          this.cityName = getCityName();
        }
      },

      //跳转到搜索页面
      goIndexSearch() {
        this.$store.commit('setSearchType', '二手房');

        this.$router.push('IndexSearch')
      }

    }

  }
</script>

<style scoped>
  .search {
    height: 40px;
    background-color: #e6191e;
    padding: 0.5rem;
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    line-height: 40px;
    font-size: 0.9rem;

  }

  .location {
    height: 1rem;
    /*font-size: 1rem;*/
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0;
    color: #ffffff;
    width: 5rem;
  }

  .search_content {
    background-color: #ffffff;
    border-radius: 0.5rem;
    width: 80%;
    display: flex;
    padding: 0 0.5rem;
  }

  .search_content > div:nth-child(1) {
    width: 6rem;
  }

  .search_content > div:nth-child(2) {
    width: 45%;
  }

  .search_content > div:nth-child(3) {
    /*width: 15%;*/
    text-align: center;
    flex: 1;
  }

  .search_content input {
    width: 100%;
    border: none;
    outline: none;
    /*border-left: 1px solid #dcdcdc;*/
  }

  .map {
    width: 5rem;
    color: #ffffff;
    text-align: right;
  }

  .map_display {
    display: none;
  }
</style>
